<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Default Theme Config | VuePress</title>
    <meta name="description" content="Vue-powered Static Site Generator">
    <link rel="icon" href="/vuepress-theme-purple/logo.png">
  <link rel="manifest" href="/vuepress-theme-purple/manifest.json">
  <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/vuepress-theme-purple/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="/vuepress-theme-purple/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/vuepress-theme-purple/assets/css/0.styles.4750dc60.css" as="style"><link rel="preload" href="/vuepress-theme-purple/assets/js/app.a1c2f8fd.js" as="script"><link rel="preload" href="/vuepress-theme-purple/assets/js/5.ceb67ac2.js" as="script"><link rel="preload" href="/vuepress-theme-purple/assets/js/4.0adfbd1a.js" as="script"><link rel="preload" href="/vuepress-theme-purple/assets/js/56.98edd7cd.js" as="script"><link rel="preload" href="/vuepress-theme-purple/assets/js/7.18012d7b.js" as="script"><link rel="preload" href="/vuepress-theme-purple/assets/js/8.b4abe17a.js" as="script"><link rel="preload" href="/vuepress-theme-purple/assets/js/6.14f6ca82.js" as="script"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/10.a5a6ea3e.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/100.ec2ceaa9.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/101.6dfa1a45.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/102.11915ae0.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/11.2ec43fbc.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/12.e5cec480.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/13.30b10f5f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/14.9d9396ac.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/15.8e9556f8.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/16.2ce11086.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/17.7bbf8455.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/18.1d45c66b.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/19.0ff815f1.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/20.a19a1201.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/21.0367ba8f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/22.0b9a8718.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/23.78c12ede.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/24.19cd8818.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/25.5eaa46dc.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/26.f38b21a1.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/27.0785a519.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/28.d23df74d.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/29.2f2dd6ca.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/30.a1bed37f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/31.7a5b7b61.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/32.2a38681f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/33.29933d35.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/34.df24a0ef.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/35.23d86e21.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/36.3c551b3f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/37.832cb8d4.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/38.47f6c955.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/39.6f51d483.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/40.b69df168.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/41.0f0c7aa2.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/42.7b1d48b5.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/43.2c5e9b01.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/44.b339774e.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/45.6206eef7.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/46.119a0a86.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/47.eb84c6c2.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/48.c31f8327.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/49.3e055789.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/50.6c78c9fc.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/51.343c71a0.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/52.76de97d9.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/53.a377d1ca.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/54.8b342bc9.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/55.465812e1.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/57.eeca3305.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/58.a58b8904.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/59.f6d4b102.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/60.92072575.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/61.2777f097.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/62.f4effeca.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/63.658ff6dc.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/64.0987e73f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/65.36b268a4.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/66.60412057.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/67.5b563239.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/68.5ecac304.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/69.37c6e078.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/70.f7a710e9.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/71.24bb765b.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/72.f770f72d.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/73.28783a42.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/74.67fcabaf.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/75.785ce193.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/76.48a6ef71.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/77.a8133ac0.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/78.b950bccd.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/79.846d11a1.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/80.e746a20b.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/81.9ad3a7b4.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/82.7daf65f4.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/83.d506c84b.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/84.86d70e47.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/85.45ae9504.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/86.5ecfb585.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/87.a75e695f.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/88.39411bf5.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/89.a18a78c1.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/9.c4d21b85.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/90.45813435.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/91.a9b7f9e9.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/92.3f789f66.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/93.3420f93e.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/94.eac427a9.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/95.2b3fcbfb.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/96.263a20f3.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/97.506fd3ae.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/98.4d8c9524.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/99.ee01147c.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/vendors~flowchart.9a3d1af6.js"><link rel="prefetch" href="/vuepress-theme-purple/assets/js/vendors~notification.1cc30b22.js">
    <link rel="stylesheet" href="/vuepress-theme-purple/assets/css/0.styles.4750dc60.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="navbar-container"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-theme-purple/" class="home-link router-link-active"><!----> <span class="site-name">VuePress</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-theme-purple/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vuepress-theme-purple/config/" class="nav-link">Config Reference</a></div><div class="nav-item"><a href="/vuepress-theme-purple/plugin/" class="nav-link">Plugin</a></div><div class="nav-item"><a href="/vuepress-theme-purple/theme/" class="nav-link router-link-active">Theme</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Learn More" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>API</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vuepress-theme-purple/api/cli.html" class="nav-link">CLI</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/api/node.html" class="nav-link">Node</a></li></ul></li><li class="dropdown-item"><h4>Contributing Guide</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/local-development.html" class="nav-link">Local Development</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/design-concepts.html" class="nav-link">Design Concepts</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/faq/" class="nav-link">FAQ</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/glossary.html" class="nav-link">Glossary</a></li></ul></li><li class="dropdown-item"><h4>Miscellaneous</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/migration-guide.html" class="nav-link">Migrate from 0.x</a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Changelog
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  0.x
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-theme-purple/theme/default-theme-config.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/vuepress-theme-purple/zh/theme/default-theme-config.html" class="nav-link">简体中文</a></li></ul></div></div> <a href="https://github.com/fengxinming/vuepress-theme-purple" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></div></header> <div class="page-container"><div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-theme-purple/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vuepress-theme-purple/config/" class="nav-link">Config Reference</a></div><div class="nav-item"><a href="/vuepress-theme-purple/plugin/" class="nav-link">Plugin</a></div><div class="nav-item"><a href="/vuepress-theme-purple/theme/" class="nav-link router-link-active">Theme</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Learn More" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>API</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vuepress-theme-purple/api/cli.html" class="nav-link">CLI</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/api/node.html" class="nav-link">Node</a></li></ul></li><li class="dropdown-item"><h4>Contributing Guide</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/local-development.html" class="nav-link">Local Development</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/design-concepts.html" class="nav-link">Design Concepts</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/faq/" class="nav-link">FAQ</a></li><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/glossary.html" class="nav-link">Glossary</a></li></ul></li><li class="dropdown-item"><h4>Miscellaneous</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/vuepress-theme-purple/miscellaneous/migration-guide.html" class="nav-link">Migrate from 0.x</a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Changelog
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  0.x
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-theme-purple/theme/default-theme-config.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/vuepress-theme-purple/zh/theme/default-theme-config.html" class="nav-link">简体中文</a></li></ul></div></div> <a href="https://github.com/fengxinming/vuepress-theme-purple" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Theme</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vuepress-theme-purple/theme/" class="sidebar-link">Introduction</a></li><li><a href="/vuepress-theme-purple/theme/using-a-theme.html" class="sidebar-link">Using a theme</a></li><li><a href="/vuepress-theme-purple/theme/writing-a-theme.html" class="sidebar-link">Writing a theme</a></li><li><a href="/vuepress-theme-purple/theme/option-api.html" class="sidebar-link">Theme Configuration</a></li><li><a href="/vuepress-theme-purple/theme/default-theme-config.html" class="active sidebar-link">Default Theme Config</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#homepage" class="sidebar-link">Homepage</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#navbar" class="sidebar-link">Navbar</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#navbar-logo" class="sidebar-link">Navbar Logo</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#navbar-links" class="sidebar-link">Navbar Links</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#disable-the-navbar" class="sidebar-link">Disable the Navbar</a></li></ul></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#sidebar" class="sidebar-link">Sidebar</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#nested-header-links" class="sidebar-link">Nested Header Links</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#displaying-header-links-of-all-pages" class="sidebar-link">Displaying Header Links of All Pages</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#active-header-links" class="sidebar-link">Active Header Links</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#sidebar-groups" class="sidebar-link">Sidebar Groups</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#multiple-sidebars" class="sidebar-link">Multiple Sidebars</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#auto-sidebar-for-single-pages" class="sidebar-link">Auto Sidebar for Single Pages</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#disabling-the-sidebar" class="sidebar-link">Disabling the Sidebar</a></li></ul></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#search-box" class="sidebar-link">Search Box</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#built-in-search" class="sidebar-link">Built-in Search</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#algolia-docsearch" class="sidebar-link">Algolia DocSearch</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#search-placeholder" class="sidebar-link">Search Placeholder</a></li></ul></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#last-updated" class="sidebar-link">Last Updated</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#prev-next-links" class="sidebar-link">Prev / Next Links</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#git-repository-and-edit-links" class="sidebar-link">Git repository and Edit Links</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#smooth-scrolling" class="sidebar-link">Smooth Scrolling</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#custom-page-class" class="sidebar-link">Custom Page Class</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#custom-layout-for-specific-pages" class="sidebar-link">Custom Layout for Specific Pages</a></li><li class="sidebar-sub-header"><a href="/vuepress-theme-purple/theme/default-theme-config.html#ejecting" class="sidebar-link">Ejecting</a></li></ul></li><li><a href="/vuepress-theme-purple/theme/inheritance.html" class="sidebar-link">Theme Inheritance</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="default-theme-config"><a href="#default-theme-config" class="header-anchor">#</a> Default Theme Config</h1> <p class="bit-sponsor"><a href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue" target="_blank" rel="noopener noreferrer"><span>This project is sponsored by</span> <img alt="bit" src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit.png"></a></p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>All options listed on this page apply to the default theme only. If you are using a custom theme, the options may be different.</p></div> <h2 id="homepage"><a href="#homepage" class="header-anchor">#</a> Homepage</h2> <p>The default theme provides a homepage layout (used on <a href="/vuepress-theme-purple/" class="router-link-active">the homepage of this site</a>). To use it, specify <code>home: true</code> plus some other metadata in your root <code>README.md</code>'s <a href="/vuepress-theme-purple/guide/markdown.html#front-matter">YAML frontmatter</a>. This is an example of how it works:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">home</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">heroImage</span><span class="token punctuation">:</span> /hero.png
<span class="token key atrule">heroText</span><span class="token punctuation">:</span> Hero Title
<span class="token key atrule">tagline</span><span class="token punctuation">:</span> Hero subtitle
<span class="token key atrule">actionText</span><span class="token punctuation">:</span> Get Started →
<span class="token key atrule">actionLink</span><span class="token punctuation">:</span> /guide/
<span class="token key atrule">features</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> Simplicity First
  <span class="token key atrule">details</span><span class="token punctuation">:</span> Minimal setup with markdown<span class="token punctuation">-</span>centered project structure helps you focus on writing.
<span class="token punctuation">-</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> Vue<span class="token punctuation">-</span>Powered
  <span class="token key atrule">details</span><span class="token punctuation">:</span> Enjoy the dev experience of Vue + webpack<span class="token punctuation">,</span> use Vue components in markdown<span class="token punctuation">,</span> and develop custom themes with Vue.
<span class="token punctuation">-</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> Performant
  <span class="token key atrule">details</span><span class="token punctuation">:</span> VuePress generates pre<span class="token punctuation">-</span>rendered static HTML for each page<span class="token punctuation">,</span> and runs as an SPA once a page is loaded.
<span class="token key atrule">footer</span><span class="token punctuation">:</span> MIT Licensed <span class="token punctuation">|</span> Copyright © 2018<span class="token punctuation">-</span>present Evan You
<span class="token punctuation">---</span>
</code></pre></div><p>You can disable <code>title</code> and <code>subtitle</code> by setting the corresponding field to <code>null</code>.</p> <p>Any extra content after the <code>YAML front matter</code> will be parsed as normal Markdown and rendered after the features section.</p> <p>To use a fully custom homepage layout, you can also use a <a href="#custom-layout-for-specific-pages">Custom Layout</a>.</p> <h2 id="navbar"><a href="#navbar" class="header-anchor">#</a> Navbar</h2> <p>The Navbar may contain your page title, <a href="#search-box">Search Box</a>, <a href="#navbar-links">Navbar Links</a>, <a href="/vuepress-theme-purple/guide/i18n.html">Languages</a> and <a href="#git-repo-and-edit-links">Repository Link</a>, they all depend on your configuration.</p> <h3 id="navbar-logo"><a href="#navbar-logo" class="header-anchor">#</a> Navbar Logo</h3> <p>You can add a logo to the navbar via <code>themeConfig.logo</code>. Logo can be placed in <a href="/vuepress-theme-purple/guide/assets.html#public-files">public folder</a>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    logo<span class="token operator">:</span> <span class="token string">'/assets/img/logo.png'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="navbar-links"><a href="#navbar-links" class="header-anchor">#</a> Navbar Links</h3> <p>You can add links to the navbar via <code>themeConfig.nav</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Home'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Guide'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/guide/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'External'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'https://google.com'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Outbound links automatically get <code>target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;</code>. You can offer <code>target</code> and <code>rel</code> to customize the attributes:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'External'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'https://google.com'</span><span class="token punctuation">,</span> target<span class="token operator">:</span><span class="token string">'_self'</span><span class="token punctuation">,</span> rel<span class="token operator">:</span><span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Guide'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/guide/'</span><span class="token punctuation">,</span> target<span class="token operator">:</span><span class="token string">'_blank'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>These links can also be dropdown menus if you provide an array of <code>items</code> instead of a <code>link</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Languages'</span><span class="token punctuation">,</span>
        ariaLabel<span class="token operator">:</span> <span class="token string">'Language Menu'</span><span class="token punctuation">,</span>
        items<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Chinese'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/language/chinese/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Japanese'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/language/japanese/'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can also have sub groups inside a dropdown by having nested items:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        text<span class="token operator">:</span> <span class="token string">'Languages'</span><span class="token punctuation">,</span>
        items<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Group1'</span><span class="token punctuation">,</span> items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token comment">/*  */</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Group2'</span><span class="token punctuation">,</span> items<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token comment">/*  */</span><span class="token punctuation">]</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="disable-the-navbar"><a href="#disable-the-navbar" class="header-anchor">#</a> Disable the Navbar</h3> <p>To disable the navbar globally, use <code>themeConfig.navbar</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    navbar<span class="token operator">:</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can disable the navbar for a specific page via <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">navbar</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token punctuation">---</span>
</code></pre></div><h2 id="sidebar"><a href="#sidebar" class="header-anchor">#</a> Sidebar</h2> <p>To enable the sidebar, use <code>themeConfig.sidebar</code>. The basic configuration expects an Array of links:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    sidebar<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">'/'</span><span class="token punctuation">,</span>
      <span class="token string">'/page-a'</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'/page-b'</span><span class="token punctuation">,</span> <span class="token string">'Explicit link text'</span><span class="token punctuation">]</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can omit the <code>.md</code> extension, and paths ending with <code>/</code> are inferred as <code>*/README.md</code>. The text for the link is automatically inferred (either from the first header in the page or explicit title in <code>YAML front matter</code>). To explicitly specify the link text, use an array in form of <code>[link, text]</code>.</p> <h3 id="nested-header-links"><a href="#nested-header-links" class="header-anchor">#</a> Nested Header Links</h3> <p>The sidebar automatically displays links for headers in the current active page, nested under the link for the page itself. You can customize this behavior using <code>themeConfig.sidebarDepth</code>. The default depth is <code>1</code>, which extracts the <code>h2</code> headers. Setting it to <code>0</code> disables the header links, and the max value is <code>2</code> which extracts both <code>h2</code> and <code>h3</code> headers.</p> <p>A page can also override this value via <code>YAML front matter</code>:</p> <div class="language-md extra-class"><pre class="language-md"><code><span class="token hr punctuation">---</span>
<span class="token title important">sidebarDepth: 2
<span class="token punctuation">---</span></span>
</code></pre></div><h3 id="displaying-header-links-of-all-pages"><a href="#displaying-header-links-of-all-pages" class="header-anchor">#</a> Displaying Header Links of All Pages</h3> <p>The sidebar only displays links for headers in the current active page. You can display all header links for every page with <code>themeConfig.displayAllHeaders: true</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    displayAllHeaders<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// Default: false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="active-header-links"><a href="#active-header-links" class="header-anchor">#</a> Active Header Links</h3> <p>By default, the nested header links and the hash in the URL are updated as the user scrolls to view the different sections of the page. This behavior can be disabled with the following theme config:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    activeHeaderLinks<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Default: true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>It’s worth mentioning that when you disable this option, the corresponding script of this functionality will not be loaded. This is a small point in our performance optimization.</p></div> <h3 id="sidebar-groups"><a href="#sidebar-groups" class="header-anchor">#</a> Sidebar Groups</h3> <p>You can divide sidebar links into several groups by using objects:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    sidebar<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token string">'Group 1'</span><span class="token punctuation">,</span>   <span class="token comment">// required</span>
        path<span class="token operator">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>      <span class="token comment">// optional, which should be a absolute path.</span>
        collapsable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// optional, defaults to true</span>
        sidebarDepth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>    <span class="token comment">// optional, defaults to 1</span>
        children<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token string">'/'</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        title<span class="token operator">:</span> <span class="token string">'Group 2'</span><span class="token punctuation">,</span>
        children<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">/* ... */</span> <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Sidebar groups are collapsable by default. You can force a group to be always open with <code>collapsable: false</code>.</p> <p>A sidebar group config also supports <a href="#nested-header-links">sidebarDepth</a> field to override the default sidebar depth (<code>1</code>).</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Nested sidebar group <span class="badge tip" style="vertical-align:top;" data-v-c13ee5b0>beta</span> is also supported, but the nesting depth should be less than 3, otherwise the console will receive a warning.</p></div> <h3 id="multiple-sidebars"><a href="#multiple-sidebars" class="header-anchor">#</a> Multiple Sidebars</h3> <p>To display different sidebars for different sections of content, first organize your pages into directories for each desired section:</p> <div class="language- extra-class"><pre class="language-text"><code>.
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar/
   ├─ README.md
   ├─ three.md
   └─ four.md
</code></pre></div><p>Then, update your configuration to define your sidebar for each section.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    sidebar<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">'/foo/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">''</span><span class="token punctuation">,</span>     <span class="token comment">/* /foo/ */</span>
        <span class="token string">'one'</span><span class="token punctuation">,</span>  <span class="token comment">/* /foo/one.html */</span>
        <span class="token string">'two'</span>   <span class="token comment">/* /foo/two.html */</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>

      <span class="token string">'/bar/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">''</span><span class="token punctuation">,</span>      <span class="token comment">/* /bar/ */</span>
        <span class="token string">'three'</span><span class="token punctuation">,</span> <span class="token comment">/* /bar/three.html */</span>
        <span class="token string">'four'</span>   <span class="token comment">/* /bar/four.html */</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>

      <span class="token comment">// fallback</span>
      <span class="token string">'/'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">''</span><span class="token punctuation">,</span>        <span class="token comment">/* / */</span>
        <span class="token string">'contact'</span><span class="token punctuation">,</span> <span class="token comment">/* /contact.html */</span>
        <span class="token string">'about'</span>    <span class="token comment">/* /about.html */</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Make sure to define the fallback configuration last.</p> <p>VuePress checks each sidebar config from top to bottom. If the fallback configuration was first, VuePress would incorrectly match <code>/foo/</code> or <code>/bar/four.html</code> because they both start with <code>/</code>.</p></div> <h3 id="auto-sidebar-for-single-pages"><a href="#auto-sidebar-for-single-pages" class="header-anchor">#</a> Auto Sidebar for Single Pages</h3> <p>To automatically generate a sidebar that contains only the header links for the current page, you can use <code>YAML front matter</code> on that page:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">sidebar</span><span class="token punctuation">:</span> auto
<span class="token punctuation">---</span>
</code></pre></div><p>You can also enable it in all pages by using config:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    sidebar<span class="token operator">:</span> <span class="token string">'auto'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>In <a href="/vuepress-theme-purple/guide/i18n.html">multi-language</a> mode, you can also apply it to a specific locale:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token string">'/'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       sidebar<span class="token operator">:</span> <span class="token string">'auto'</span>
     <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="disabling-the-sidebar"><a href="#disabling-the-sidebar" class="header-anchor">#</a> Disabling the Sidebar</h3> <p>You can disable the sidebar on a specific page with <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">sidebar</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token punctuation">---</span>
</code></pre></div><h2 id="search-box"><a href="#search-box" class="header-anchor">#</a> Search Box</h2> <h3 id="built-in-search"><a href="#built-in-search" class="header-anchor">#</a> Built-in Search</h3> <p>You can disable the built-in search box with <code>themeConfig.search: false</code>, and customize how many suggestions will be shown with <code>themeConfig.searchMaxSuggestions</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    search<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    searchMaxSuggestions<span class="token operator">:</span> <span class="token number">10</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can also disable the built-in search box for individual pages with <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">search</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token punctuation">---</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Built-in Search only builds index from the title, <code>h2</code> and <code>h3</code> headers, if you need full text search, you can use <a href="#algolia-docsearch">Algolia DocSearch</a>.</p></div> <h3 id="algolia-docsearch"><a href="#algolia-docsearch" class="header-anchor">#</a> Algolia DocSearch</h3> <p>The <code>themeConfig.algolia</code> option allows you to use <a href="https://community.algolia.com/docsearch/" target="_blank" rel="noopener noreferrer">Algolia DocSearch<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to replace the simple built-in search. To enable it, you need to provide at least <code>apiKey</code> and <code>indexName</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    algolia<span class="token operator">:</span> <span class="token punctuation">{</span>
      apiKey<span class="token operator">:</span> <span class="token string">'&lt;API_KEY&gt;'</span><span class="token punctuation">,</span>
      indexName<span class="token operator">:</span> <span class="token string">'&lt;INDEX_NAME&gt;'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">Note</p> <p>Unlike the <a href="#built-in-search">built-in search</a> engine which works out of the box, <a href="https://community.algolia.com/docsearch/" target="_blank" rel="noopener noreferrer">Algolia DocSearch<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> requires you to submit your site to them for indexing before it starts working.</p></div> <p>For more options, check out <a href="https://github.com/algolia/docsearch#docsearch-options" target="_blank" rel="noopener noreferrer">Algolia DocSearch’s documentation<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p> <h3 id="search-placeholder"><a href="#search-placeholder" class="header-anchor">#</a> Search Placeholder</h3> <p>You can define a placeholder for the search box by adding the <code>searchPlaceholder</code> attribute:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    searchPlaceholder<span class="token operator">:</span> <span class="token string">'Search...'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="last-updated"><a href="#last-updated" class="header-anchor">#</a> Last Updated</h2> <p>The <code>themeConfig.lastUpdated</code> option allows you to get the UNIX timestamp(ms) of each file’s last <code>git</code> commit, and it will also display at the bottom of each page in an appropriate format:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    lastUpdated<span class="token operator">:</span> <span class="token string">'Last Updated'</span><span class="token punctuation">,</span> <span class="token comment">// string | boolean</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Note that it’s <code>off</code> by default. If given a <code>string</code>, it will be displayed as a prefix (default value: <code>Last Updated</code>).</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Since <code>lastUpdated</code> is based on <code>git</code>, you can only use it in a <code>git</code> repository. Also, since the timestamp used comes from the git commit, it will display only after a first commit for a given page, and update only on ensuing commits of that page.</p></div> <p><strong>Also see:</strong></p> <ul><li><a href="/vuepress-theme-purple/plugin/official/plugin-last-updated.html">@vuepress/plugin-last-updated</a></li></ul> <h2 id="prev-next-links"><a href="#prev-next-links" class="header-anchor">#</a> Prev / Next Links</h2> <p>Prev and next links are automatically inferred based on the sidebar order of the active page.</p> <p>You can disable them globally with <code>themeConfig.nextLinks</code> and <code>themeConfig.prevLinks</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// default value is true. Set it to false to hide next page links on all pages</span>
    nextLinks<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// default value is true. Set it to false to hide prev page links on all pages</span>
    prevLinks<span class="token operator">:</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can also explicitly overwrite or disable them for individual pages with <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">prev</span><span class="token punctuation">:</span> ./some<span class="token punctuation">-</span>other<span class="token punctuation">-</span>page
<span class="token key atrule">next</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token punctuation">---</span>
</code></pre></div><h2 id="git-repository-and-edit-links"><a href="#git-repository-and-edit-links" class="header-anchor">#</a> Git repository and Edit Links</h2> <p>Providing <code>themeConfig.repo</code> auto generates a GitHub link in the navbar and &quot;Edit this page&quot; links at the bottom of each page.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// Assumes GitHub. Can also be a full GitLab url.</span>
    repo<span class="token operator">:</span> <span class="token string">'vuejs/vuepress'</span><span class="token punctuation">,</span>
    <span class="token comment">// Customising the header label</span>
    <span class="token comment">// Defaults to &quot;GitHub&quot;/&quot;GitLab&quot;/&quot;Bitbucket&quot; depending on `themeConfig.repo`</span>
    repoLabel<span class="token operator">:</span> <span class="token string">'Contribute!'</span><span class="token punctuation">,</span>

    <span class="token comment">// Optional options for generating &quot;Edit this page&quot; link</span>

    <span class="token comment">// if your docs are in a different repo from your main project:</span>
    docsRepo<span class="token operator">:</span> <span class="token string">'vuejs/vuepress'</span><span class="token punctuation">,</span>
    <span class="token comment">// if your docs are not at the root of the repo:</span>
    docsDir<span class="token operator">:</span> <span class="token string">'docs'</span><span class="token punctuation">,</span>
    <span class="token comment">// if your docs are in a specific branch (defaults to 'master'):</span>
    docsBranch<span class="token operator">:</span> <span class="token string">'master'</span><span class="token punctuation">,</span>
    <span class="token comment">// defaults to false, set to true to enable</span>
    editLinks<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// custom text for edit link. Defaults to &quot;Edit this page&quot;</span>
    editLinkText<span class="token operator">:</span> <span class="token string">'Help us improve this page!'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can overwrite the following properties on specific pages via <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">editLink</span><span class="token punctuation">:</span> <span class="token boolean important">false </span><span class="token comment"># Will overwrite 'editLinks' from themeConfig</span>
<span class="token key atrule">prev</span><span class="token punctuation">:</span> <span class="token boolean important">true </span><span class="token comment"># Will overwrite 'prevLinks' property from themeConfig</span>
<span class="token key atrule">next</span><span class="token punctuation">:</span> ./my<span class="token punctuation">-</span>next<span class="token punctuation">-</span>page <span class="token comment"># Will overwrite 'nextLinks' property from themeConfig</span>
<span class="token punctuation">---</span>
</code></pre></div><h2 id="smooth-scrolling"><a href="#smooth-scrolling" class="header-anchor">#</a> Smooth Scrolling <span class="badge tip" style="vertical-align:top;" data-v-c13ee5b0>1.2.0+</span></h2> <p>The <code>themeConfig.smoothScroll</code> option allows you to enable smooth scrolling.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// .vuepress/config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    smoothScroll<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="custom-page-class"><a href="#custom-page-class" class="header-anchor">#</a> Custom Page Class</h2> <p>Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with <code>pageClass</code> in <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">pageClass</span><span class="token punctuation">:</span> custom<span class="token punctuation">-</span>page<span class="token punctuation">-</span>class
<span class="token punctuation">---</span>
</code></pre></div><p>Then you can write CSS targeting that page only in <code>./vuepress/styles/index.styl</code>.</p> <div class="language-css extra-class"><pre class="language-css"><code>
<span class="token selector">.theme-container.custom-page-class</span> <span class="token punctuation">{</span>
  <span class="token comment">/* page-specific rules */</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">Note</p> <p>These styles are written in <a href="/vuepress-theme-purple/config/#index-styl">index.styl</a>, a file that allows you to conveniently add extra styles or override existing ones for the default theme.</p></div> <h2 id="custom-layout-for-specific-pages"><a href="#custom-layout-for-specific-pages" class="header-anchor">#</a> Custom Layout for Specific Pages</h2> <p>By default the content of each <code>*.md</code> file is rendered in a <code>&lt;div class=&quot;page&quot;&gt;</code> container, along with the sidebar, auto-generated edit links and prev/next links. To use a fully custom component in place of the page, you can again specify the component to use using <code>YAML front matter</code>:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> SpecialLayout
<span class="token punctuation">---</span>
</code></pre></div><p>This will render <code>.vuepress/components/SpecialLayout.vue</code> for the given page.</p> <h2 id="ejecting"><a href="#ejecting" class="header-anchor">#</a> Ejecting</h2> <p>You can copy the default theme source code into <code>.vuepress/theme</code> to fully customize the theme using the <code>vuepress eject [targetDir]</code> command.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Once you eject, you are on your own and <strong>won’t</strong> be receiving future updates or bugfixes to the default theme even if you upgrade VuePress.</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/fengxinming/vuepress-theme-purple/edit/master/theme/default-theme-config.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/13/2020, 1:59:37 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/vuepress-theme-purple/theme/option-api.html" class="prev">Theme Configuration</a></span> <span class="next"><a href="/vuepress-theme-purple/theme/inheritance.html">Theme Inheritance</a>
      →
    </span></p></div> </main></div></div><div class="global-ui"><!----><!----></div></div>
    <script src="/vuepress-theme-purple/assets/js/app.a1c2f8fd.js" defer></script><script src="/vuepress-theme-purple/assets/js/5.ceb67ac2.js" defer></script><script src="/vuepress-theme-purple/assets/js/4.0adfbd1a.js" defer></script><script src="/vuepress-theme-purple/assets/js/56.98edd7cd.js" defer></script><script src="/vuepress-theme-purple/assets/js/7.18012d7b.js" defer></script><script src="/vuepress-theme-purple/assets/js/8.b4abe17a.js" defer></script><script src="/vuepress-theme-purple/assets/js/6.14f6ca82.js" defer></script>
  </body>
</html>
